@tailwind base;
@tailwind components;
@tailwind utilities;

/* ... */

@layer base {
  :root {

    --background: 0 0% 100%;

    --foreground: 0 0% 3.9%;

    --card: 0 0% 100%;

    --card-foreground: 0 0% 3.9%;

    --popover: 0 0% 100%;

    --popover-foreground: 0 0% 3.9%;

    --primary: 0 0% 9%;

    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 96.1%;

    --secondary-foreground: 0 0% 9%;

    --muted: 0 0% 96.1%;

    --muted-foreground: 0 0% 45.1%;

    --accent: 0 0% 96.1%;

    --accent-foreground: 0 0% 9%;

    --destructive: 0 84.2% 60.2%;

    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 89.8%;

    --input: 0 0% 89.8%;

    --ring: 0 0% 3.9%;

    --chart-1: 12 76% 61%;

    --chart-2: 173 58% 39%;

    --chart-3: 197 37% 24%;

    --chart-4: 43 74% 66%;

    --chart-5: 27 87% 67%;

    --radius: 0.5rem
  ;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%}
  .dark {

    --background: 0 0% 3.9%;

    --foreground: 0 0% 98%;

    --card: 0 0% 3.9%;

    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3.9%;

    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;

    --primary-foreground: 0 0% 9%;

    --secondary: 0 0% 14.9%;

    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 14.9%;

    --muted-foreground: 0 0% 63.9%;

    --accent: 0 0% 14.9%;

    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;

    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14.9%;

    --input: 0 0% 14.9%;

    --ring: 0 0% 83.1%;

    --chart-1: 220 70% 50%;

    --chart-2: 160 60% 45%;

    --chart-3: 30 80% 55%;

    --chart-4: 280 65% 60%;

    --chart-5: 340 75% 55%
  ;

    --sidebar-background: 240 5.9% 10%;

    --sidebar-foreground: 240 4.8% 95.9%;

    --sidebar-primary: 224.3 76.3% 48%;

    --sidebar-primary-foreground: 0 0% 100%;

    --sidebar-accent: 240 3.7% 15.9%;

    --sidebar-accent-foreground: 240 4.8% 95.9%;

    --sidebar-border: 240 3.7% 15.9%;

    --sidebar-ring: 217.2 91.2% 59.8%}
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* 苹果风格自定义动画和过渡效果 */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulse-soft {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 113, 227, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 113, 227, 0);
  }
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* 苹果风格按钮悬停效果 */
.apple-button-hover {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.apple-button-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 113, 227, 0.4);
}

.apple-button-hover:active {
  transform: translateY(1px);
  box-shadow: 0 5px 15px -5px rgba(0, 113, 227, 0.4);
}

/* 精致的输入框焦点效果 */
.apple-input-focus {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.apple-input-focus:focus {
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
  border-color: #0071e3;
}

/* 磨砂玻璃效果 */
.apple-glassmorphism {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 光滑卡片悬停效果 */
.apple-card-hover {
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.apple-card-hover:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 苹果风格的渐变文本 */
.apple-gradient-text {
  background: linear-gradient(90deg, #0066cc, #42a4ff);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

/* 微妙的脉冲动画 */
.apple-pulse {
  animation: pulse-soft 2s infinite;
}

/* 轻微的浮动效果 */
.apple-float {
  animation: float 6s ease-in-out infinite;
}

/* 苹果风格的阴影 */
.apple-shadow-sm {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.apple-shadow-md {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.apple-shadow-lg {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* 微妙的过渡效果 */
.apple-transition {
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
